<template>
  <div class="select-icon" @mouseenter="close" @mouseleave="open">
    <div class="slecrt-item top"></div>
    <div class="slecrt-item middle"></div>
    <div class="slecrt-item bottom"></div>
  </div>
</template>
<script>
import $ from "jquery";
import anime from "animejs/lib/anime.es.js";
export default {
  name: "AniSelect",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    close: function() {
      anime({
        targets: ".select-icon .top",
        rotate: "45deg",
        top: "8px"
      });
      anime({
        targets: ".select-icon .bottom",
        rotate: "-45deg",
        top: "-8px"
      });
      anime({
        targets: ".select-icon .middle",
        left: "100px"
      });
    },
    open: function() {
      anime({
        targets: ".select-icon .top",
        rotate: "0",
        top: "0"
      });
      anime({
        targets: ".select-icon .bottom",
        rotate: "0",
        top: "0"
      });
      anime({
        targets: ".select-icon .middle",
        left: "0"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.select-icon {
  position: relative;
  width: 30px;
  display: flex;
  height: 30px;
  background-color: white;
  flex-direction: column;
  justify-content: space-evenly;
  overflow: hidden;
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  .slecrt-item {
    position: relative;
    height: 2px;
    width: 75%;
    background-color: rgb(114, 114, 114);
    border-radius: 2px;
  }
}
</style>